import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import { MemoryCard as CardType } from '../../types'
import './MemoryCard.scss'

interface Props { card: CardType }

const MemoryCard: React.FC<Props> = ({ card }) => {
  const date = new Date(card.createTime).toLocaleString()
  return (
    <View className='memory-card'>
      <View className='header'>
        <Text className='date'>{date}</Text>
      </View>
      <View className='avatars'>
        <Image src={card.participants.self.avatar || ''} className='avatar' />
        {card.participants.other && (
          <Image src={card.participants.other.avatar || ''} className='avatar' />
        )}
      </View>
      {card.memo && <Text className='memo'>{card.memo}</Text>}
    </View>
  )
}

export default MemoryCard 